<template>
    <div>
        <div class="editor-title">
            <span class="editor-title__name">{{ data.text }}</span>
            <div class="editor-title__sub-text">
                支持长按识别企微/个人二维码，不配置跳转链接时生效。小程序版本更新后支持( 最多添加 10 个广告，鼠标拖拽调整广告顺序，建议图片宽度750像素
            </div>
        </div>
        <div class="img-btn-con">
            <!-- {{data.data.data}} -->
            <draggable v-model="data.data.data" animation="200" item-key="id">
                <template #item="{ element, index }">
                    <div style="" @mouseover="element.showClose = true" @mouseout="element.showClose = false">
                        <div style="position: relative">
                            <div class="cls-flex item-con">
                                <div class="left-img" @click="change_img(index)">
                                    <img :src="element.url" class="left-img" />
                                    <div class="tip-con">更换图片</div>
                                </div>
                                <div class="cls-between right-box cls-column">
                                    <div class="right-one cls-flex">
                                        <div style="width: 3rem; flex: none">标题</div>
                                        <el-input v-model="element.title" placeholder="建议10个字以内，可不填" style="width: 192px" clearable />
                                    </div>
                                    <div class="right-one cls-flex" style="width: 100%; margin: 6px 0px">
                                        <div style="width: 3rem; flex: none">链接</div>
                                        <div v-if="element.link == undefined || element.link == ''" class="better-link__text" @click="page_click(index)">
                                            选择链接页面<el-icon>
                                                <ArrowDown />
                                            </el-icon>
                                        </div>
                                        <div class="better-link__active flexs" v-else>
                                            <div class="better-link__active-info flexs">
                                                <p class="better-link__active-name line-one">{{ element.link.urlText }}</p>
                                                <el-icon @click.stop="element.link = ''" style="color: #4b93fa">
                                                    <CloseBold />
                                                </el-icon>
                                            </div>
                                            <p class="better-link__text" @click="page_click(index)">
                                                修改<el-icon>
                                                    <ArrowDown />
                                                </el-icon>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="right-one cls-flex" style="width: 100%">
                                        <div style="width: 3rem; flex: none">颜色</div>
                                        <div>
                                            <el-color-picker v-model="element.color" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="close-btn" :style="{ display: element.showClose ? '' : 'none' }">
                                <el-icon color="#bbb" :size="20" @click="del_click(index)">
                                    <CircleCloseFilled />
                                </el-icon>
                            </div>
                        </div>
                    </div>
                </template>
            </draggable>

            <div class="img-btn cls-flex" @click="clickAdd" v-if="data.data.data.length < 10">
                <el-icon>
                    <Plus />
                </el-icon>
                <div class="cls-center" style="flex: 1">添加背景图</div>
            </div>
        </div>
        <div style="padding: 16px">
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">切换速度</div>
                <div style="flex: 1"></div>
                <div class="cls-flex">
                    <el-select v-model="data.data.interval" placeholder="请选择" style="width: 140px">
                        <el-option label="1秒" :value="1000" />
                        <el-option label="2秒" :value="2000" />
                        <el-option label="3秒" :value="3000" />
                        <el-option label="4秒" :value="4000" />
                        <el-option label="5秒" :value="5000" />
                    </el-select>
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">图片倒角</div>
                <div style="flex: 1">{{ data.rpxStyle["border-radius"] == 0 ? "直角" : "圆角" }}</div>
                <div class="cls-flex">
                    <el-button
                        :icon="Picture"
                        :type="data.rpxStyle['border-radius'] == 0 ? 'primary' : 'default'"
                        plain
                        @click="data.rpxStyle['border-radius'] = 0"
                    />
                    <el-button
                        :icon="PictureRounded"
                        :type="data.rpxStyle['border-radius'] != 0 ? 'primary' : 'default'"
                        plain
                        @click="data.rpxStyle['border-radius'] = 5"
                    />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">圆角距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['border-radius']" :max="max" @change="radius_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['border-radius']" @input="radius_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">页面边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-left']" :max="max" @change="padding_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-left']" @input="padding_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">图片高度</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle.height" :max="400" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle.height" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">上边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-top']" :min="0" :max="300" @change="mtt_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-top']" @input="mtt_change" />
                </div>
            </div>
            <div class="cls-flex" style="padding-bottom: 1rem">
                <div class="label-con">下边距</div>
                <div style="flex: 1; padding-right: 1rem">
                    <el-slider v-model="data.rpxStyle['margin-bottom']" :min="0" :max="300" @change="mtb_change" />
                </div>
                <div style="width: 4rem">
                    <el-input v-model.number="data.rpxStyle['margin-bottom']" @input="mtb_change" />
                </div>
            </div>
        </div>
    </div>
    <!-- 图片库 -->
    <picture-library :show="showImg" @close="showImg = false" @select="selectImg" :select_multiple="false"> </picture-library>

    <PageDialog :show="showPage" :show-cate="true" :show-public="true" :show-news="true" :show-new-list="true" @change="page_change" @close="showPage = false"></PageDialog>
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { CircleCloseFilled, Picture, PictureRounded, CloseBold, ArrowDown, Plus } from "@element-plus/icons-vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import draggable from "vuedraggable"
import PageDialog from "@components/PageDialog.vue"

const { proxy } = getCurrentInstance()
const max = 30 // 最大值，适用于内外边距和圆角

/**
 * 轮播图
 * @property {Object} pageData  页面数据
 */
const props = defineProps({
    data: {
        type: Object,
        default: {
            id: 2,
            type_name: "swiper",
            text: "轮播图",
            state: 1, // 1是组件未拖拽调用，2是已经拖拽调用了
            data: {
                type: "swiper",
                /**请求地址*/
                reqUrl: "",
                /**请求参数*/
                reqData: {},
                /* 当没有请求地址的时候，使用data数据 */
                data: [],
            },
        },
    },
})
/**
 * 页面列表
 */
const pageArr = ref([])
onMounted(() => {
    proxy.$axios
        .get("decorate/index")
        .then((r) => {
            let res = r.data
            if (res.code == 0) {
                pageArr.value = res.data
            } else {
                proxy.$message({ message: res.msg, type: "error" })
            }
        })
        .catch((err) => {})
})

/**
 * 页面跳转选择
 * @param {Number} imgIdx 数组索引
 * @param {Number} page_id 页面跳转ID
 */
const showPage = ref(false)
const page_change = (link) => {
    props.data.data.data[imgIdx.value].link = link
    props.data.data.data[imgIdx.value].title = link.urlText
    showPage.value = false
    // let img = props.data.data.data[imgIdx.value]
    // let page_index = pageArr.value.findIndex((item) => item.decorate_id == page_id)
    // img.pageTitle = page_index > -1 ? pageArr.value[page_index].title : ""
}
const page_click = (index) => {
    imgIdx.value = index
    showPage.value = true
}
const showImg = ref(false)
const clickAdd = () => {
    showImg.value = true
    imgIdx.value = -1
}
const selectImg = (val) => {
    showImg.value = false
    let imgObj = {
        url: proxy.imgUrl + val[0].photo,
        name: val[0].name,
        page_id: "",
        pageTitle: "",
        color:''
    }

    if (imgIdx.value != -1) {
        props.data.data.data[imgIdx.value].url = proxy.imgUrl + val[0].photo
        props.data.data.data[imgIdx.value].name = val[0].name
        imgIdx.value = -1
    } else {
        props.data.data.data.push(imgObj)
    }
}
const del_click = (index) => {
    props.data.data.data.splice(index, 1)
}

// 页面边距变化
const padding_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["margin-left"] = props.data.rpxStyle["margin-right"] = Number(val)
}
// 圆角变化
const radius_change = (val) => {
    val = val > max ? max : val
    props.data.rpxStyle["border-radius"] = Number(val)
}

// margin
const mtt_change = (val) => {
    props.data.rpxStyle["margin-top"] = Number(val)
}
const mtb_change = (val) => {
    props.data.rpxStyle["margin-bottom"] = Number(val)
}

/**
 * 更换图片
 * @param {int} index 索引
 */
const imgIdx = ref(-1)
const change_img = (index) => {
    showImg.value = true
    imgIdx.value = index
}
</script>

<style lang="less" scoped>
.el-button + .el-button {
    margin-left: 0 !important;
}

.el-button {
    border-radius: 0 !important;
}

.img-btn {
    border: 1px solid #4b93fa;
    padding: 9px 16px;
    background: #fff;
    color: #4b93fa;
    border-radius: 2px;
    cursor: pointer;
}

.item-con {
    padding: 14px;
    margin-bottom: 14px;
    border-radius: 2px;
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgb(10 42 97 / 20%);

    .left-img {
        width: 60px;
        height: 60px;
        flex: none;
        cursor: pointer;
        position: relative;
    }

    .right-box {
        overflow: hidden;
        padding-left: 10px;
        min-height: 60px;

        .right-one {
            overflow: hidden;
        }
    }
}

.label-con {
    flex: none;
    width: 82px;
    font-size: 14px;
    padding-right: 10px;
    color: #969799;
}

.close-btn {
    position: absolute;
    top: -0.5rem;
    cursor: pointer;
    right: -0.5rem;
}

.tip-con {
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px;
    text-align: center;
}

.better-link__text {
    line-height: @line-height-md;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #4b93fa;
    font-size: 12px;
    .el-icon {
        margin-left: @margin-base;
    }
}

.better-link__active {
    width: 100%;
    overflow: hidden;
    color: @themes;
    font-size: @font-size-sm;

    .better-link__active-info {
        flex: 1;
        border: 1px solid @themes;
        border-radius: @radius-sm;
        background-color: #e0edff;
        padding: 2px 4px;
        margin-right: @margin-sm;
        overflow: hidden;

        .better-link__active-name {
            flex: 1;
            margin-right: @margin-xs;
        }

        .el-icon {
            flex: none;
            cursor: pointer;
        }
    }
}
</style>
